<!-- 客户列表 -->
<template>
  <div class="DealerInfoStyle">
    <div class="cardAdmin">
    <!-- <div class="formContainer">
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
          <el-input style="flex: 3;" v-model="name"></el-input>
        </div>
        <div style="margin: auto 0 auto auto;padding-bottom: 5px;padding-right: 10px;">
          <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
        </div>
        <div style="position: absolute;left: 10px;bottom: 5px;">
        </div>
                </div> -->
    </div>
    <!-- 表格 -->
    <el-table :data="CompanyTable" row-key="id" border :row-style="tableRowStyle"  class="x1919"
      :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }">
      <el-table-column prop="id" label="id" width="60" fixed="left" align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="en_name" label="英文版名称" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="tw_name" label="繁体版名称" width="auto" min-width="200px" align="center">
      </el-table-column>

      <el-table-column label="操作" width="150" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog :title="titles" :visible.sync="dialogVisible" width="70%" @close="handleClose" top="15vh">
      <div class="pop-up-form">
        <div class="form-options" style="">
          <span style="font-size: 20px;font-weight: 700;">{{ nametype
          }}</span>

        </div>
        <div class="form-options" style="">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
          <el-input style="flex: 6;" v-model="addform.name"></el-input>

        </div>
        <div class="form-options" style="">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">英文版名称：</span>
          <el-input style="flex: 6;" v-model="addform.en_name"></el-input>
        </div>
        <div class="form-options" style="">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">繁体版名称：</span>
          <el-input style="flex: 6;" v-model="addform.tw_name"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button v-show="titles == '新增'" type="primary" @click="add_contactAdd()" size="small">确
          定</el-button>
        <el-button v-show="titles == '编辑'" type="primary" @click="upd_menuEditing()" size="small">更
          新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { menuList2, menuEditing } from "@/utils/api";
export default {
  name: 'CompanyInfo',
  data() {
    return {
      addform: {
        name: '',
        en_name: '',
        tw_name: '',
      },
      CompanyTable: [],
      dialogVisible: false,
      titles: '',
      name: '',
      nametype: '编辑'

    };
  },
  mounted() {
    this.get_menuList2()
  },

  methods: {
    tableRowStyle({ row }) {
      // 判断 row 中是否有 father_menu_id，或者根据其他标识来设置样式
      return row.father_menu_id !== 0
        ? { backgroundColor: '#edf2fa', color: '#ff8718' }  // 子级样式
        : { backgroundColor: '#ffffff', color: '#000', fontWeight: 700, fontSize: '14px !important' }; // 父级样式
    },
    // 查询公司列表
    async get_menuList2() {
      let data = {}
      const res = await menuList2(data).catch((err) => {
        return console.error(err);
      });
      if (res.data && res.data.code == "200") {
        this.CompanyTable = res.data.data
        this.total = res.data.total
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 更新
    async upd_menuEditing() {
      let data = this.addform
      const res = await menuEditing(data).catch((err) => {
        return console.error(err);
      });
      if (res.data && res.data.code == "200") {
        this.$message.success(res.data.msg);
        this.dialogVisible = false
        this.currentPage = 1;
        this.get_menuList2()
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 关闭弹窗时
    handleClose() {

    },
    handleClosetable() {

    },

    // 分页
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.get_menuList2();
    },
    // 重置
    resetForm() {
      this.currentPage = 1
      this.get_menuList2();
    },
    // 编辑打开时
    tableEditing(row) {
      this.titles = '编辑'
      this.dialogVisible = true
      row.father_menu_id == 0 ? this.nametype = '主菜单' : this.nametype = '子菜单'
      this.addform.name = row.name
      this.addform.en_name = row.en_name
      this.addform.tw_name = row.tw_name
      this.addform.id = row.id
      console.log(row, 'row');
    },
  },
};
</script>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

.el-dialog__body {
  padding: 0 10px !important;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style lang="less" scoped>
.el-textarea {
  overflow: hidden;
  /* 隐藏滚动条 */
}

.DealerInfoStyle {
  width: 100%;
  padding: 0 10px;
  // background-color: aquamarine;
  height: calc(100vh - 100px);
  // border: 1px #000 solid;

  .cardAdmin {
    position: relative;
    // height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;

    border: #ebeef5 solid 1px;
    padding: 0 5px;
    margin-bottom: 2px;


    .formContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      align-self: baseline;
      padding-bottom: 40px;
    }

    .formSearch {
      width: 25%;
      min-width: 25%;
      margin: 10px 0;
      height: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .pop-up-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    align-self: baseline;
    margin: 10px 0;
    justify-content: center;
    padding-right: 15px;

    .form-options {
      width: 100%;
      min-width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
}
</style>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

textarea {
  resize: none !important;
}
</style>